﻿<div id="body">
    <section class="content-wrapper main-content clear-fix">
        <div>
            <h2>All Products</h2>
            <ul id="products" />
        </div>
        <div>
            <h2>Search by ID</h2>
            <input type="text" id="prodId" size="5" />
            <input type="button" value="Search" onclick="find();" />
            <p id="product" />
        </div>
    </section>
</div>

@section scripts {
    <script>
        var apiUrl = 'api/products/GetAllProducts';

        $(document).ready(function () {
            // Send an AJAX request
            $.getJSON(apiUrl)
                .done(function (data) {
                    // On success, 'data' contains a list of products.
                    $.each(data, function (key, item) {
                        // Add a list item for the product.
                        $('<li>', { text: formatItem(item) }).appendTo($('#products'));
                    });
                });
        });

        function formatItem(item) {
            return item.Name + ': $' + item.Price;
        }

        function find() {
            var id = $('#prodId').val();
            $.getJSON(apiUrl + '/' + id)
                .done(function (data) {
                    $('#product').text(formatItem(data));
                })
                .fail(function (jqXHR, textStatus, err) {
                    $('#product').text('Error: ' + err);
                });
        }
    </script>
}